<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>首页</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <div class="container">
        <div class="row">
            <h2>Hello World! My name is JWT.<small><a href="javascript:;" class="pull-right logout_handle">退出</a></small></h2>
            <ul class="list-group">
                <li class="list-group-item">用户：<i id="user_name"></i></li>
                <li class="list-group-item">年龄：<i id="age"></i></li>
            </ul>
        </div>
    </div>
</body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script>
    $(function(){
        // 登录操作
        var login_page = "./login.html";
        // 获取 Token 没有则跳转到登录页面
        var token = localStorage.getItem('token');
        if(!token){
            alert('未登录，请登录');
            window.location.href = login_page;
            return;
        }
        // 获取用户信息接口
        var get_url = './get_user.php?token=' + token;
        // 有 Token 则请求后端数据，如果 status=-1 跳转到登录页面
        // 如果 status=0 则返回错误通知
        // 如果 status=1 则渲染数据
        // 点击退出操作 退出成功则跳转到登录界面
        $.ajax({
            url:get_url,
            type:"GET",
            success:function(back){
                var status = back.status;
                var info = back.info;
                var data = back.data;
                if(!status || status == '-1'){
                    alert(info);
                    window.location.href = login_page;
                    return;
                }
                var user_name = data.user_name;
                var age = data.age;
                $("#user_name").text(user_name);
                $("#age").text(age);
            },
            error:function(){
                alert('网络不稳定');
            }
        });

    });
</script>
<script>
    $(function(){
        // 退出操作
        $(".logout_handle").click(function(){
            localStorage.clear();
            window.location.href = "./login.html";
        });
    });
</script>
</html>